<template>
	<div>
		<el-row :gutter="24">

			<el-col :span="1" style="">
				<p class="queryLabel">单位:</p>
			</el-col>
			<el-col :span="3">
				<el-input placeholder="请选择单位" size="small" icon="search" v-model="companyLabel" :on-icon-click="handleIconClick">
				</el-input>
			</el-col>
			<el-col :span="1" style="margin-right:10px;">
				<p class="queryLabel">所在仓库:</p>
			</el-col>
			<el-col :span="4">
				<el-select v-model="warehouses"  left size="small" placeholder="请选择仓库" clearable>
					<el-option v-for="item in warehouseCombo" :label="item.label" :value="item.value"></el-option>
				</el-select>
			</el-col>
			<el-col :span="1" style="margin-right:10px;">
				<p class="queryLabel">统计粒度:</p>
			</el-col>
			<el-col :span="6">
				<el-radio-group v-model="condition.radio">
					<el-radio :label="1">车系</el-radio>
					<el-radio :label="2">车型</el-radio>
					<el-radio :label="3">配置</el-radio>
				</el-radio-group>
				<!--<el-radio class="radio" v-model="condition.radio" label="1">车系</el-radio>
				<el-radio class="radio" v-model="condition.radio" label="2">车型</el-radio>
				<el-radio class="radio" v-model="condition.radio" label="3">配置</el-radio>-->
			</el-col>
			<el-col :span="4">
				<el-button type="primary" size="small" v-on:click="repertoryQuery">统计</el-button>
			</el-col>
		</el-row>
		<el-row :gutter="24">
			<el-col :span="24"> 
				<div id="charts">
					<div id="main" style="width:1100px;height:350px;display: none;"></div>
				</div>
			</el-col>
		</el-row>
		
		<el-row :gutter="24">
		<el-col :span="24">

				<el-table :data="tableData.dataList" border style="width: 100%;align-content: center;" @selection-change="handleSelectionChange">
					<el-table-column type="selection" width="60">
					</el-table-column>
					<el-table-column label="VIN" prop="vin" width = "180">
					</el-table-column>
					<el-table-column label="车系" align="right" prop="carSeries" width = "170">
					</el-table-column>
					<el-table-column label="车型" align="right" prop="carModel" width = "170">
					</el-table-column>
					<el-table-column label="配置" align="right" prop="configure" width = "170">
					</el-table-column>
					<el-table-column label="库龄天数" align="right" prop="stockDay" width = "170">
					</el-table-column>
					<el-table-column label="仓库" align="right" prop="warehouseName" width = "170">
					</el-table-column>
				</el-table>
				<el-pagination small @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="CurentPage" :page-sizes="page.pageSizes" :page-size="page.pageSize" layout=" total,prev, pager, next" :total="tableData.total">
				</el-pagination>

			</el-col>
			</el-row>
			
			
		<company :show="showCompany" v-if="showCompany" v-on:close="showCompany=false" v-on:insert="insert"></company>
	</div>

</template>

<script>
	window.name = "";
	window.types = "1",
	window.functionClick=Function;
	import company from '../../insPlugins/company.vue'
	import moment from 'moment'
	import echarts from 'echarts'
	export default {
		data: function() {
			return {

				
			
				showCompany: false,
				//页码数
				CurentPage: 1,
				//每页的数量
				page: this.page,
				//公司数据
				tableData: {
					total: 0,
					dataList: []
				},
				multipleSelection: [],
				warehouses:"",
				condition: {
					companyId: [],
					warehouse: [],
					radio: 1,

				},
				
				//types: "0",
				warehouseCombo: [],
				companyId: [],
				companyLabel: "",
				carSeries: [],
				carSeriesCount: [],
				carModel: [],
				carModelCount: [],
				carConfigure: [],
				carConfigureCount: [],
				dataLists: [],
				paramName: "",
			}
		},
		components: {
			company
		},
		methods: {

			//查询列表信息
			detailQuery: function() {
				var mainId = document.getElementById('main');//获取图形对象
				var wareh=[];
				debugger;
				if(this.$data.warehouses==""||this.$data.warehouses==null){
					wareh=null;
				}else{
					wareh[0]=this.$data.warehouses;
				}
				var selections={
				warehouseId: wareh,
				companyId:this.$data.condition.companyId
				}
				
				this.$http.post(this.API_ROOT + '/scm/repertory/repertoryPage', selections,{
					params: {
						name: window.name,
						//warehouseId: this.$data.condition.warehouse,
						start: this.$data.CurentPage,
						limit: this.$data.page.pageSize,
						types: window.types,
					}
				}).then(resp => {
					if(resp.data.success) {
						resp.data.total = parseInt(resp.data.total);
						// es5写法
						this.$data.tableData = resp.data;
						//this.baseQuery(this.$data.curTreeDeptId);
						//this.$data.exFormShow = false;
						
						mainId.style.display = "block";//显示图形
					} else {
						//
						this.$message.error(resp.data.msg); //请选择仓库
						mainId.style.display = "none";//隐藏图形
					}
				}, resp => {});
			},
			
			//选择框
			handleSelectionChange: function(val) {
				
				this.$data.multipleSelection = val;
				
			},

			//列表，分页大小切换
			handleSizeChange: function() {},
			//列表,当前页切换
			handleCurrentChange: function(currentPage) {
				this.$data.CurentPage = currentPage;
				this.detailQuery();
			},
			//点击统计的回调函数
			repertoryQuery: function() {
				window.name="";
				window.types="";
				debugger;
				var wareh=[];	
				if(this.$data.warehouses==""||this.$data.warehouses==null){
					wareh=null;
				}else{
					wareh[0]=this.$data.warehouses;
				}
				var conditions={
					warehouseId: wareh,
					companyId:this.$data.condition.companyId
				};
				
				this.$http.post(this.API_ROOT + '/scm/repertory/repertoryReport', conditions,{
					params: {
						//warehouseId: this.$data.condition.warehouse,
						radio: this.$data.condition.radio,
					}
				}).then((response) => {
					debugger;
					if(response.data.dataList != undefined||response.data.dataList == []) {
						this.$data.dataLists = response.data.dataList;
						this.detailQuery();
						for(var i = 0; i < response.data.dataList.length; i++) {
							if(this.$data.condition.radio == '1') {
								this.$data.carSeries[i] = response.data.dataList[i].name
								types = "1";
								//this.detailQuery();
								//this.$data.carSeriesCount[i]  = response.data.dataList[i].count
							}
							if(this.$data.condition.radio == '2') {
								this.$data.carModel[i] = response.data.dataList[i].name
								types = "2";
								//this.detailQuery();
								
								//this.$data.carSeriesCount[i]  = response.data.dataList[i].count
							}
							if(this.$data.condition.radio == '3') {
								this.$data.carConfigure[i] = response.data.dataList[i].name
								types = "3";
								//this.detailQuery();
								//this.$data.carSeriesCount[i]  = response.data.dataList[i].count
							}
						}
					} else {
						this.$message.error(resp.data.msg);
					}
					this.mounteds();
				}, (response) => {});
			},
			//打开车型车系选择
			handleIconClick: function() {
				this.$data.showCompany = true;
			},
			//给仓库增加全部的选项
			addWarehouse:function(){
				var warehouseEatem={};//{"label":"托管","id":"402881a25be71368015be74a12aa0009","value":"0"}
				warehouseEatem.label="全部";
				warehouseEatem.value="";
				this.$data.warehouseCombo.push(warehouseEatem);
			},
			//单位选择的回调
			insert: function(val, lable) {
				
				this.$data.companyId = val;
				this.$data.companyLabel = lable;
				this.$data.condition.companyId=val;
				this.$data.warehouses="";
				//单位
				this.$http.post(this.API_ROOT + '/scm/warehouse/comboIn', this.$data.companyId, {
					params: {}
				}).then((response) => {
					
					this.$data.warehouseCombo = response.data;
					this.addWarehouse();
					//this.$message(response.data);
				}, (response) => {});
			},
			mounteds: function() {
				functionClick=this.detailQuery;
				//window.name = names;
				//var names;
				// 基于准备好的dom，初始化echarts实例
				var myChart = echarts.init(document.getElementById('main'));
				// 指定图表的配置项和数据
				var option1 = {
					title: {
						text: '车系',
						x: 'center'
					},
					tooltip: {
						trigger: 'item',
						formatter: "{a} <br/>{b} : {c} ({d}%)"
					},
					legend: {
						orient: 'vertical',
						left:'60%',	//标签的位置距左边
						top:'8%', // 标签的位置距上边
						data: this.$data.carSeries
					},
					series: [{
						center:['30%','50%'],	//圆形图位置（圆心位置）
						name: '车系',
						type: 'pie',
						radius: '55%',
						//roseType: 'angle',
						data: this.$data.dataLists
					}]
				};
				var option2 = {
					
					title: {
						text: '车型',
						x: 'center'
					},
					tooltip: {
						trigger: 'item',
						formatter: "{a} <br/>{b} : {c} ({d}%)"
					},
					legend: {
						orient: 'vertical',
						left:'60%',	//标签的位置距左边
						top:'8%', // 标签的位置距上边
						data: this.$data.carModel
					},
					series: [{
						center:['30%','50%'],	//圆形图位置（圆心位置）
						name: '车型',
						type: 'pie',
						radius: '55%',
						//roseType: 'angle',
						data: this.$data.dataLists
					}]
				};

				var option3 = {
					title: {
						text: '配置',
						x: 'center'
					},
					tooltip: {
						trigger: 'item',
						formatter: "{a} <br/>{b} : {c} ({d}%)"
					},
					legend: {	// 标签
						orient: 'vertical',
						left:'60%',	//标签的位置距左边
						top:'8%', // 标签的位置距上边
						data: this.$data.carConfigure
					},
					series: [{
						center:['30%','50%'],	//圆形图位置（圆心位置）
						name: '配置',
						type: 'pie',
						radius: '55%',
						
						//roseType: 'angle',
						data: this.$data.dataLists,
					}]
				};

				// 使用刚指定的配置项和数据显示图表。
				
				
			
				if(this.$data.condition.radio == 1) {
					
					myChart.setOption(option1);
					//this.$data.paramName = names;
					myChart.on('click', function(param) {
						name = param.name;
						
						//alert(types);
						functionClick();
					});
					//this.detailQuery();
				}
				if(this.$data.condition.radio == 2) {
					myChart.setOption(option2);
					myChart.on('click', function(param) {
						name = param.name;
						
						//alert(types);
						functionClick();
					});
					//this.detailQuery();
				}
				if(this.$data.condition.radio == 3) {
					myChart.setOption(option3);
					myChart.on('click', function(param) {
						name = param.name;
						
						//alert(types);
						functionClick();
					});
					//this.detailQuery();
				}
			},

		},
		//表单创建时执行
		created: function() {
			var val=[];
			val[0]=window.localStorage.getItem("companyId");
			this.$data.companyLabel = window.localStorage.getItem("companyName");
			this.insert(val, window.localStorage.getItem("companyName"));
		}
	}
</script>

<style>

</style>